import { useEffect, useState } from 'react';

export default function Txtarea(
	{
		value,
		placeholder,
		maxLength,
		height = '17.5rem',
		onChange
	}: {
		value?: string
		placeholder?: string
		maxLength?: number;
		height?: string;
		onChange(v: string): void
	}
) {
	const [len, setlen] = useState(value ? value.length : 0);
	const maxLen = maxLength && maxLength > 0 ? maxLength : null;

	useEffect(() => {
		void (async () => {
			setlen(value ? value.length : 0);
		})();
	}, [value]);
	return <>
		<div className='bg'>
			<textarea value={value} placeholder={placeholder} className='txt' onChange={(e) => {
				const l = e.target.value.length;
				setlen(l);
				onChange(e.target.value);
			}} />
			{maxLen && <div className='lenv'>
				<span className='len'>{`${len}/${maxLength}`}</span>
			</div>}
			<style jsx>{`
.bg{
display: flex;
flex-direction: column;
padding: 0.5rem 1rem;
background-color: #FFFFFF;
width: 100%;
margin-bottom: 0.5rem;
}
.txt{
background-color: #FFFFFF;
border: 0.05rem solid #D9D9D9;
border-radius: 0.125rem;
font-size: 0.875rem;
color: #000000;
width: 100%;
min-height: ${height};
}
.lenv{
display: flex;
flex-direction: row;
justify-content: flex-end;
margin-top: -2rem;
margin-right: 1.5rem;
z-index: 1;
}
.len{
font-size: 0.9375rem;
color: #A09A9A;
}
			`}</style>
		</div>
	</>;
}
